<template>
  <div class="common-card  bg-white">
    <dc-cell class="main-title" title="营业分析" :to="'/bsAnalysis'" value="详情" sVal="true" isLink></dc-cell>

    <dc-row class="pt40 pb40 mid1px" type="flex" justify="center">
      <dc-col class="card-data" span="7">
        <span class="num">{{analysisDetail.busiTotal}}</span>
        <span class="label">营业额</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <span class="num">{{analysisDetail.discTotal}}</span>
        <span class="label">优惠金额</span>
      </dc-col>
      <dc-col class="card-data" span="7">
        <span class="num">{{analysisDetail.incomeTotal}}</span>
        <span class="label">实际收入</span>
      </dc-col>
    </dc-row>
    <div class="sub-title">今日营业目标达成情况</div>
    <div class="">
      <div class="common-chart" id="gauge"></div>
    </div>
  </div>
</template>

<script>
  import {initGauge} from '@/common/echarts/gauge';
  import api from '@/common/api/bsAnalysis';
  import {col, row} from '@/components/Flex';
  import cell from '@/components/cell';
  export default {
    data () {
      return {
        analysisDetail: {
          finishRate: '0',
          busiGoal: '0',
          busiTotal: 0,
          discTotal: 0,
          incomeTotal: 0,
          breakevenLineGap: 0,
          businessGoalGap: 0
        },
        richColor: '#ccc',
        value: 186,
        min: 0,
        max: 220,
        dcChart: null
      };
    },
    components: {
      'dc-col': col,
      'dc-row': row,
      'dc-cell': cell
    },
    activated () {
      this.richColor = '#ccc';
      this._getBsAnalysisDetail({});
    },
    methods: {
      //获取营业日报
      _getBsAnalysisDetail (data) {
        api.getBsAnalysisDetail(data)
          .then(res => {
            this.analysisDetail = res;
            let fi = parseFloat(this.analysisDetail.finishRate.replace(',', ''));
            if (fi <= 50 && fi > 0) {
              this.richColor = '#FE8A70';
            }
            if (fi <= 80 && fi > 50) {
              this.richColor = '#FFCA6F';
            }
            if (fi > 80) {
              this.richColor = '#66CF8E';
            }
            this.initGauge();
          });
      },
      initGauge () {
        this.dcChart.hideLoading();
        this.dcChart.setOption({
          tooltip: {
            formatter: this.analysisDetail.finishRate + '%'
          },
          series: [
            {
              title: {
                textStyle: {
                  fontSize: '9px'
                }
              },
              name: '业务指标',
              type: 'gauge',
              startAngle: 225,
              endAngle: -45,
              min: 0,
              max: parseInt(this.analysisDetail.busiGoal.replace(',', '')) || 1,
              axisLine: {
                show: true,
                lineStyle: {
                  width: 20,
                  shadowBlur: 0,
                  color: [
                    [parseFloat(this.analysisDetail.finishRate.replace(',', '')) / 100, this.richColor],
                    [1, '#D9D8D8']
                  ]
                }
              },
              axisLabel: {
                show: false
              },
              itemStyle: { //仪表盘指针样式
                normal: {
                  color: this.richColor,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              },
              pointer: { //仪表盘指针
                show: true,
                width: 5
              },
              detail: {
                textStyle: {
                  color: this.richColor,
                  fontSize: 20
                },
                formatter: this.analysisDetail.finishRate + '%'
              },
              data: [{value: parseInt(this.analysisDetail.busiGoal.replace(',', '')) ? this.analysisDetail.busiTotal : 0, name: '完成率'}]
            }
          ]
        });
      }
    },
    mounted () {
      this.dcChart = initGauge('#gauge');
      this._getBsAnalysisDetail({});
      this.initGauge();
    }
  };
</script>

<style lang="scss">
  @import "../../../assets/css/variable";
  #gauge {
    height: px2rem(412px);
  }
</style>
